﻿$(function () {
    // 页面加载完成后获取所有数据
    loadAllCharts();

    function loadAllCharts() {
        echarts_1();  // 商品类别销售
        echarts_2();  // 地区销售对比
        echarts_4();  // 平台销售趋势
        echarts_5();  // 重点地区销售
        echarts_6();  // 核心地区占比
        echarts_31(); // 年龄分布
        echarts_32(); // 职业分布
        echarts_33(); // 兴趣分布
        loadYearlySales(); // 年度销售额
    }

    function echarts_1() {
        var myChart = echarts.init(document.getElementById('echart1'));

        // 从后端API获取数据
        $.get('/api/sales/category', function(response) {
            var option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                grid: { left: '0%', top:'10px', right: '0%', bottom: '4%', containLabel: true },
                xAxis: [{
                    type: 'category',
                    data: response.categories,
                    axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" } },
                    axisTick: { show: false },
                    axisLabel: { interval: 0, show: true, splitNumber: 15, textStyle: { color: "rgba(255,255,255,.6)", fontSize: '12' } }
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: { show:true, textStyle: { color: "rgba(255,255,255,.6)", fontSize: '12' } },
                    axisTick: { show: false },
                    axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" } },
                    splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }
                }],
                series: [{
                    type: 'bar',
                    data: response.sales,
                    barWidth:'35%',
                    itemStyle: { normal: { color:'#2f89cf', opacity: 1, barBorderRadius: 5 } }
                }]
            };
            myChart.setOption(option);
        });

        window.addEventListener("resize", function(){ myChart.resize(); });
    }

    function echarts_2() {
        var myChart = echarts.init(document.getElementById('echart2'));

        $.get('/api/sales/region', function(response) {
            var option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                grid: { left: '0%', top:'10px', right: '0%', bottom: '4%', containLabel: true },
                xAxis: [{
                    type: 'category',
                    data: response.regions,
                    axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" } },
                    axisTick: { show: false },
                    axisLabel: { interval: 0, show: true, splitNumber: 15, textStyle: { color: "rgba(255,255,255,.6)", fontSize: '12' } }
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: { show:true, textStyle: { color: "rgba(255,255,255,.6)", fontSize: '12' } },
                    axisTick: { show: false },
                    axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" } },
                    splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }
                }],
                series: [{
                    type: 'bar',
                    data: response.sales,
                    barWidth:'35%',
                    itemStyle: { normal: { color:'#27d08a', opacity: 1, barBorderRadius: 5 } }
                }]
            };
            myChart.setOption(option);
        });

        window.addEventListener("resize", function(){ myChart.resize(); });
    }

    function echarts_4() {
        var myChart = echarts.init(document.getElementById('echart4'));

        $.get('/api/sales/platform-trend', function(response) {
            var option = {
                tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#dddc6b' } } },
                legend: {
                    top:'0%',
                    data:['安卓','IOS'],
                    textStyle: { color: 'rgba(255,255,255,.5)', fontSize:'12' }
                },
                grid: { left: '10', top: '30', right: '10', bottom: '10', containLabel: true },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize:12 } },
                    axisLine: { lineStyle: { color: 'rgba(255,255,255,.2)' } },
                    data: response.times
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: { show: false },
                    axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },
                    axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize:12 } },
                    splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }
                }],
                series: [
                    {
                        name: '安卓',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: { normal: { color: '#0184d5', width: 2 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(1, 132, 213, 0.4)' },
                                    { offset: 0.8, color: 'rgba(1, 132, 213, 0.1)' }
                                ], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: { normal: { color: '#0184d5', borderColor: 'rgba(221, 220, 107, .1)', borderWidth: 12 } },
                        data: response.android
                    },
                    {
                        name: 'IOS',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: { normal: { color: '#00d887', width: 2 } },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: 'rgba(0, 216, 135, 0.4)' },
                                    { offset: 0.8, color: 'rgba(0, 216, 135, 0.1)' }
                                ], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: { normal: { color: '#00d887', borderColor: 'rgba(221, 220, 107, .1)', borderWidth: 12 } },
                        data: response.ios
                    }
                ]
            };
            myChart.setOption(option);
        });

        window.addEventListener("resize", function(){ myChart.resize(); });
    }

    function echarts_5() {
        var myChart = echarts.init(document.getElementById('echart5'));

        $.get('/api/sales/key-regions', function(response) {
            var option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                grid: { left: '0%', top:'10px', right: '0%', bottom: '2%', containLabel: true },
                xAxis: [{
                    type: 'category',
                    data: response.regions,
                    axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" } },
                    axisTick: { show: false },
                    axisLabel: { interval: 0, show: true, splitNumber: 15, textStyle: { color: "rgba(255,255,255,.6)", fontSize: '12' } }
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: { show:true, textStyle: { color: "rgba(255,255,255,.6)", fontSize: '12' } },
                    axisTick: { show: false },
                    axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" } },
                    splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }
                }],
                series: [{
                    type: 'bar',
                    data: response.sales,
                    barWidth:'35%',
                    itemStyle: { normal: { color:'#2f89cf', opacity: 1, barBorderRadius: 5 } }
                }]
            };
            myChart.setOption(option);
        });

        window.addEventListener("resize", function(){ myChart.resize(); });
    }

    function echarts_6() {
        var myChart = echarts.init(document.getElementById('echart6'));

        $.get('/api/sales/region-ratio', function(response) {
            var dataStyle = { normal: { label: { show: false }, labelLine: { show: false } } };
            var placeHolderStyle = {
                normal: { color: 'rgba(255,255,255,.05)', label: {show: false}, labelLine: {show: false} },
                emphasis: { color: 'rgba(0,0,0,0)' }
            };

            var option = {
                color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
                tooltip: { show: true, formatter: "{a} : {c} " },
                legend: {
                    itemWidth: 10, itemHeight: 10, itemGap: 12, bottom: '3%',
                    data: response.data.map(item => item.name),
                    textStyle: { color: 'rgba(255,255,255,.6)' }
                },
                series: response.data.map((item, index) => {
                    var radiusStart = 59 - (index * 10);
                    var radiusEnd = 70 - (index * 10);
                    return {
                        name: item.name,
                        type: 'pie',
                        clockWise: false,
                        center: ['50%', '42%'],
                        radius: [radiusStart + '%', radiusEnd + '%'],
                        itemStyle: dataStyle,
                        hoverAnimation: false,
                        data: [
                            { value: item.value, name: item.name },
                            { value: 100 - item.value, name: 'invisible', tooltip: {show: false}, itemStyle: placeHolderStyle }
                        ]
                    };
                })
            };
            myChart.setOption(option);
        });

        window.addEventListener("resize", function(){ myChart.resize(); });
    }

    function echarts_31() {
        var myChart = echarts.init(document.getElementById('fb1'));

        $.get('/api/user/age-distribution', function(response) {
            var option = {
                title: [{ text: '年龄分布', left: 'center', textStyle: { color: '#fff', fontSize:'16' } }],
                tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)", position: function(p){ return [p[0] + 10, p[1] - 10]; } },
                legend: {
                    top:'70%', itemWidth: 10, itemHeight: 10,
                    data: response.data.map(item => item.name),
                    textStyle: { color: 'rgba(255,255,255,.5)', fontSize:'12' }
                },
                series: [{
                    name: '年龄分布',
                    type: 'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: { show: false }, labelLine: { show: false },
                    data: response.data
                }]
            };
            myChart.setOption(option);
        });

        window.addEventListener("resize", function(){ myChart.resize(); });
    }

    function echarts_32() {
        var myChart = echarts.init(document.getElementById('fb2'));

        $.get('/api/user/occupation-distribution', function(response) {
            var option = {
                title: [{ text: '职业分布', left: 'center', textStyle: { color: '#fff', fontSize:'16' } }],
                tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)", position: function(p){ return [p[0] + 10, p[1] - 10]; } },
                legend: {
                    top:'70%', itemWidth: 10, itemHeight: 10,
                    data: response.data.map(item => item.name),
                    textStyle: { color: 'rgba(255,255,255,.5)', fontSize:'12' }
                },
                series: [{
                    name: '职业分布',
                    type: 'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: { show: false }, labelLine: { show: false },
                    data: response.data
                }]
            };
            myChart.setOption(option);
        });

        window.addEventListener("resize", function(){ myChart.resize(); });
    }

    function echarts_33() {
        var myChart = echarts.init(document.getElementById('fb3'));

        $.get('/api/user/interest-distribution', function(response) {
            var option = {
                title: [{ text: '兴趣分布', left: 'center', textStyle: { color: '#fff', fontSize:'16' } }],
                tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)", position: function(p){ return [p[0] + 10, p[1] - 10]; } },
                legend: {
                    top:'70%', itemWidth: 10, itemHeight: 10,
                    data: response.data.map(item => item.name),
                    textStyle: { color: 'rgba(255,255,255,.5)', fontSize:'12' }
                },
                series: [{
                    name: '兴趣分布',
                    type: 'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: { show: false }, labelLine: { show: false },
                    data: response.data
                }]
            };
            myChart.setOption(option);
        });

        window.addEventListener("resize", function(){ myChart.resize(); });
    }

    function loadYearlySales() {
        $.get('/api/sales/yearly', function(response) {
            // 更新页面上的销售额数字
            $('.counter').each(function(index) {
                if (index === 0 && response.sales2024) {
                    $(this).text(formatNumber(response.sales2024));
                } else if (index === 1 && response.sales2025) {
                    $(this).text(formatNumber(response.sales2025));
                }
            });
        });
    }

    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    // 定时刷新数据（可选）
    setInterval(function() {
        loadAllCharts();
    }, 300000); // 每5分钟刷新一次
});